<template>
  <view>
        <view class="ad">
        <image class="ad-banner" :src="IMAGE_CONFIG.logo"></image>
    </view>
        <view class="waterfall-container">
        <view class="waterfall-item" v-for="(item, index) in items" :key="index">
            <image class="waterfall-img" :src="item.imageUrl"></image>
        </view>
    </view>
  </view>
</template>

<script>

import {IMAGE_CONFIG} from "../../../../utils/imageConfig";

export default {
    props: ['logo'],
    // 原有数据逻辑迁移至此
    data() {
        return {
            IMAGE_CONFIG: IMAGE_CONFIG.index,
            items: Array.from({length: 12}, () => ({
                imageUrl: 'https://jiuba-1315240672.cos.ap-guangzhou.myqcloud.com/miniapp/py/bg.png'
            }))
        }
    },
    methods: {

    }
}
</script>

<style scoped>
.ad{
    margin: 2vh;
}
.ad-banner {
    width: 100%;
    height: 35vh;
    border-radius: 10px;
}
.waterfall-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
}

.waterfall-item {
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    break-inside: avoid;
}

.waterfall-img {
    width: 100%;
    height: auto;
    display: block;
    /* 保持图片宽高比 */
}

/* 为了模拟瀑布流效果，为不同的图片设置不同的高度 */
.waterfall-item:nth-child(3n+1) .waterfall-img {
    aspect-ratio: 3/4;
}

.waterfall-item:nth-child(3n+2) .waterfall-img {
    aspect-ratio: 2/3;
}

.waterfall-item:nth-child(3n) .waterfall-img {
    aspect-ratio: 4/5;
}

/* 在小屏幕上调整 */
@media (max-width: 375px) {
    .waterfall-container {
        gap: 8px;
        padding: 8px;
    }
}
</style>
